<template>
  <div class="toast-container" v-if="isVisible">
    <div class="toast" :class="type">
      <div class="toast-content">
        <span class="toast-icon" v-if="type === 'success'">✓</span>
        <span class="toast-icon" v-else-if="type === 'error'">✕</span>
        <span class="toast-icon" v-else-if="type === 'warning'">⚠</span>
        <span class="toast-icon" v-else-if="type === 'info'">ℹ</span>
        <span class="toast-message">{{ message }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义响应式数据
const isVisible = ref(false)
const message = ref('')
const type = ref('info')
const duration = ref(3000)

// 显示Toast方法
const show = (msg: string, toastType: 'success' | 'error' | 'warning' | 'info', toastDuration: number = 3000) => {
  message.value = msg
  type.value = toastType
  duration.value = toastDuration
  isVisible.value = true
  
  // 自动隐藏
  setTimeout(() => {
    isVisible.value = false
  }, toastDuration)
}

// 手动隐藏方法
const hide = () => {
  isVisible.value = false
}

// 暴露方法给父组件
defineExpose({ show, hide })
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.toast {
  padding: 20px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.3s ease;
  min-width: 300px;
  text-align: center;
  justify-content: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-icon {
  font-size: 20px;
  font-weight: bold;
}

.toast.success {
  background-color: #f0f9ff;
  color: #03543f;
  border: 1px solid #03543f;
}

.toast.success .toast-icon {
  color: #03543f;
}

.toast.error {
  background-color: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #7f1d1d;
}

.toast.error .toast-icon {
  color: #7f1d1d;
}

.toast.warning {
  background-color: #fffbeb;
  color: #713f12;
  border: 1px solid #713f12;
}

.toast.warning .toast-icon {
  color: #713f12;
}

.toast.info {
  background-color: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #1e3a8a;
}

.toast.info .toast-icon {
  color: #1e3a8a;
}
</style>